<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>商品清单</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/images/favicon.ico" type="image/x-icon" >
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<%--<%@ include file="productNav.jsp" %>--%>
<jsp:include page="productNav.jsp"/>
<div class="container">

    <div class="alert alert-secondary" style="overflow:hidden">
        <div class="form-inline float-right">
            <input id="kw" name="kw" class="form-control" type="text" placeholder="关键字" value="${kw}">
            <button class="btn btn-success" type="button" onclick="search()">搜索</button>
        </div>

    </div>
    <div class="row container">
        <c:forEach items="${list}" var="product">
            <div class="card col-md-2" style="min-width:180px;margin: 10px 10px;">
                <a href="${pageContext.request.contextPath}/detail/${product.productID}">
                    <img class="card-img-top"
                         src="${pageContext.request.contextPath}/static/images/${product.picture}" alt="Card image"
                         height="128px" style="width:100%">
                    <div class="card-body">
                        <h6 class="card-title">${product.model} - ${product.name}</h6>
                        <p class="card-text"><span class="badge badge-secondary">${product.serialNumber}</span></p>
                        <span class="badge badge-primary center-pill">${product.brand}</span>
                        <span class="badge badge-pill badge-success center-pill">￥ ${product.price}</span>
                    </div>
                </a>
            </div>
        </c:forEach>
    </div>

    <div>
        <ul id="page_list" class="pagination justify-content-center" style="margin-top: 10px">

        </ul>
    </div>
<%--    <p class="float-right badge badge-secondary">cont:${count}</p>--%>
</div>
<c:if test="${not empty count}">
<script src="${pageContext.request.contextPath}/static/js/pagination.js"></script>
<script>
    var count = ${count};
    pagination($("#page_list"),${page},Math.ceil(count/10), "${pageContext.request.contextPath}/");
</script>
</c:if>
<script>
    function search() {
        var kw = $("#kw").val();
        if(kw)
            window.location="${pageContext.request.contextPath}/search/"+kw;
    }
</script>
</body>
</html>